<template>
  <div class="order-upload-container">
    <uploadFilter :tabs="tabs" :type="type" @upadte:uploadTabs="uploadTabs"/>
    <div class="order-upload-container-box">
      <orderUpload :import-api="importApi" :is-import-edit="isImportEdit" accept="" style="padding: 0 32px;" @getList="uploadList"/>
      <div class="upload-list">
        <div class="upload-top">
          <Title :is-show="true" :total="uploadData.total" title="上传记录 " />
          <el-button type="primary" size="small" @click="fetchData(true)">刷新</el-button>
        </div>
        <div class="upload-table">
          <el-table
            v-loading="listLoading"
            ref="uploadTable"
            :data="uploadData.items"
            :expand-row-keys="expandRowKeys"
            element-loading-text="加载中..."
            empty-text="暂无数据"
            header-cell-class-name="order-data-header-cell"
            row-class-name="pointer"
            row-key="id"
            fit
            hightlight-current-row
            @row-click="rowClick">
            <el-table-column align="left" label="姓名" >
              <template slot-scope="scope">
                {{ scope.row.staffName || '--' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="上传类型" min-width="100">
              <template>
                回收合同上传
              </template>
            </el-table-column>
            <el-table-column align="left" label="文件名称" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.fileName || '--' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="上传时间" min-width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.createDate">{{ scope.row.createDate | format('YYYY-MM-DD HH:mm:ss') }}</div>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="状态" width= "90">
              <template slot-scope="scope">
                <div v-if="scope.row.status === 0" class="status-text fail">失败</div>
                <div v-else-if="scope.row.status === 1" class="status-text success">成功</div>
                <div v-else-if="scope.row.status === 2" class="status-text ing">上传中</div>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="详情" width="80">
              <template slot-scope="scope">
                <div v-if="scope.row.status === 0 || scope.row.status === 1" class="detail-btn" @click="goDetail(scope.row)">查看</div>
              </template>
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div class="subsidiary">
                  <div v-if="scope.row.status === 0 " class="subsidiary-item">
                    <div class="subsidiary-status">
                      <img class="subsidiary-icon" src="../../../assets/orderlist/upload_fail.png" alt="">
                      <span class="text">上传失败</span>
                    </div>
                    <div v-if="scope.row.errorInfos">
                      <div v-for="(item,index) in scope.row.errorInfos" :key="index" class="error-message-item">
                        {{ item }}
                      </div>
                    </div>
                  </div>
                  <div v-if="scope.row.status === 1" class="subsidiary-item">
                    <div class="subsidiary-status">
                      <img class="subsidiary-icon" src="../../../assets/orderlist/upload_sucess.png" alt="">
                      <span class="text">上传成功！</span>
                    </div>
                    <div v-if="scope.row.errorInfos">
                      <div v-for="(item,index) in scope.row.errorInfos" :key="index" class="error-message-item">
                        {{ item }}
                      </div>
                    </div>
                  </div>
                  <div v-if="scope.row.status === 2" class="subsidiary-item">
                    <div class="subsidiary-status">
                      <img class="subsidiary-icon" src="../../../assets/orderlist/upload_ing.png" alt="">
                      <span class="text">正在导入中…</span>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="uploadData && uploadData.total > 0" class="pagination-area">
          <span class="empty"/>
          <el-pagination
            :current-page="page"
            :page-size="perPage"
            :total="uploadData.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            layout="total, prev, pager, next, sizes,jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import orderUpload from '@/components/OrderList/orderUpload';
import Title from '@/components/Title';
import uploadFilter from '@/components/OrderList/filter/uploadFilter';
import { getUploadList } from '@/api/order';
import { format } from '@/filters/date';
import { uploadType } from '@/filters/status';
import { hasRouteAuth } from '@/utils/permission';

export default {
  name: 'OrderUploadPage',
  components: { orderUpload, Title, uploadFilter },
  filters: {
    format,
    uploadType
  },
  data() {
    return {
      page: 1,
      perPage: 20,
      type: '2',
      isImportEdit: false,
      timerout: null,
      uploadData: {
        items: [],
        total: 0,
        isInit: true
      },
      listLoading: false,
      expandRowKeys: [],
      tabs: [
        { label: '回收合同上传', key: '2', authShow: hasRouteAuth('crm:contract:recycle') }
      ],
      importApi: '/admin/contract/batch/import'
    };
  },
  watch: {
    'uploadData.items': {
      handler() {
        clearTimeout(this.timerout);
        this.timer();
      }
    }
  },
  created() {
    this.fetchData();
  },
  beforeDestroy() {
    clearTimeout(this.timerout);
  },
  methods: {
    hasRouteAuth,
    // 每隔30秒刷新一次列表
    timer() {
      this.timerout = setTimeout(() => {
        this.fetchData(false, false, false);
      }, 10000);
    },
    uploadTabs(key) {
      clearTimeout(this.timerout);
      this.page = 1;
      this.fetchData();
    },
    uploadList(showLoading) {
      this.fetchData(true, showLoading);
    },
    async fetchData(reset = false, showLoading = true, isExpand = true) {
      if (reset) this.page = 1;
      try {
        const params = {
          page: this.page,
          perPage: this.perPage,
          type: this.type
        };
        this.listLoading = showLoading;
        const res = await getUploadList(params);
        this.listLoading = false;
        if (isExpand) {
          this.expandRowKeys = [];
        }
        if (res.code === 200) {
          let isUpLoading = false;
          if (this.uploadData && this.uploadData.items.length) isUpLoading = this.uploadData.items[0].status === 2;
          if (!showLoading && this.uploadData && this.uploadData.items.length && isUpLoading && res.data && res.data.items[0].status === 0) {
            this.expandRowKeys.push(res.data.items[0].id);
          }
          this.uploadData = res.data;
        }
      } catch (error) {
        this.listLoading = false;
        console.log(error);
      }
    },
    rowClick(row, column, event) {
      if (column.label !== '详情' && (row.status === 0 || row.status === 1)) {
        this.$refs.uploadTable.toggleRowExpansion(row);
      }
    },
    goDetail(row) {
      if (row.status === 0 || row.status === 1) {
        this.$refs.uploadTable.toggleRowExpansion(row);
      }
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
    }
  }
};
</script>
<style lang="scss" scoped>
.order-upload-container {
  .order-upload-container-box {
    margin: 24px;
    box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
    border-radius:12px;
    background-color: #fff;
    padding: 20px 0;
  }
  .upload-list {
    margin-top: 40px;
    padding:0 32px;

  }
  .upload-table {
    margin-top: 20px;
  }
  .detail-btn {
    color: #406EFF;
    cursor: pointer;
  }
  .upload-top {
    display: flex;
    align-items: center;
  }
  & ::v-deep {
    .el-table__expand-column {
      padding: 0;
      .cell {
        display: none;
      }
    }
    .el-table__expanded-cell {
      padding: 16px 0 26px 0;
    }
    .pointer {
      cursor: pointer;
      &.expanded {
        td {
          border-bottom: 1px solid transparent;
        }
      }
    }
  }
  .pagination-area {
    display: flex;
    margin-top: 20px;
    .empty {
      flex:1;
    }
  }
  .status-text {
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:#999999;
    line-height:20px;
    &.success {color:#999999;}
    &.ing {color:#45B448;}
    &.fail {color:#FD8546;}
  }
}
.subsidiary {
  background: #fafafa;
  padding: 24px 60px;
  border-radius:8px;
  .subsidiary-item {
    display: flex;
    .subsidiary-icon {
      width: 32px;
      height: 32px;
      margin-right: 12px;
    }
    .subsidiary-status {
      display: flex;
      margin-right: 60px;
      .text {
        white-space: nowrap;
        font-size:20px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:32px;
      }
    }
    .error-message-item {
      color: #E02020;
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      line-height:1.3;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
@media screen and (min-width: 1900px) {
  .subsidiary {
    padding: 24px 84px;
    .subsidiary-status {
      margin-right: 80px !important;
    }
  }
}
</style>
